<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="./css/nodejs.css" rel="stylesheet" />
<style>
* {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	background: #e1e1e1;
}

a {
	text-decoration: none;
}

.select {
	height:20px;
}
.head {
	width: 100%;
	height: 50px;
	background: blue;
}

.main {
	width: auto;
	height: 600px;
	margin: 15px 24px;
}

.main-left {
	width: 68%;
	height: 100%;
	float: left;
	background: #fff;
	margin: 0;
	padding: 0;
}

.main-right {
	width: 30%;
	height: 100%;
	float: right;
	background: #fff;
	margin: 0;
	padding: 0;
}


.login-title .text1 a {
	color: #80bd01;
	text-shadow: none;
	text-decoration: none;
	font-size: 14px;
}

.login-title .text2 {
	color: #ccc;
	font-size: 14px;
}

.login-title .text3 {
	color: #999;
	font-size: 14px;
}

.login-table {
	background: #fff;
	width: 100%;
}

.login-username {
	width: 100%;
	height: auto;
	margin: 20px 10px 30px 10px;
}

label {
	width: 10%;
	font-size: 16px;
	font-weight:bold;
	height: 30px;
	line-height: 30px;
	text-align: left;
	padding-right: 10px;
}

.input {
	width: 90%;
	height: 20px;
	padding: 4px 6px;
	margin: 0px;
	border: 1px solid #888;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.input:focus {
	border-color: rgba(82, 168, 236, .8);
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
		rgba(82, 168, 236, .6);
}

.login-password {
	width: 360px;
	height: 30px;
	margin: auto;
}

.login-buttons {
	width: 300px;
	height: 40px;
	margin: auto;
	text-align: right;
	margin-top: 30px;
}

.button {
	height: 40px;
	line-height: 40px;
	text-align: center;
	padding: 8px 10px 8px 10px;
	background: #08c;
	color: #fff;
	font-size: 13px;
	text-shadow: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.button:hover {
	background: #05c;
}

.button-light {
	background-color: #5bc0de;
}

.button-light:hover {
	background-color: #2f96b4;
}

.wangjimima:hover {
	text-decoration: underline;
}

.main-right-title {
	height: 40px;
	width: auto;
	background-color: #f6f6f6;
	line-height: 40px;
	padding-left: 20px;
	color: #444;
}

.main-right-text span {
	display: block;
	padding: 10px 10px 10px 20px;
}

.main-right-text li {
	padding: 10px 10px 10px 20px;
	font-size: 10px;
}
#blog_content {
margin:0px 10px 0px 10px;
}
</style>
</head>
<body>
	<jsp:include page="head.jsp"></jsp:include>
	<div class="main">
		<div class="main-left">
			<div class="list-left">
				<div class="list-left-head">
					<ul class="list-left-menu">
						<li><b>写文章</b></li>
					</ul>
				</div>
				<div class="list-left-contents">
					${msg}
					<form action="/write" method="post">
						<div class="login-username">
						<label>标题</label><input type="text" value="" name="title" class="input">
						</div>
						<div id="blog_content"></div>
						<div class="login-username">
						<label>分类</label>
						<select name="blog_sort_id" class="select">
								<option value="1">分类</option>
								<option value="2">精华</option>
								<option value="3">问答</option>
								<option value="4">招聘</option>
								<option value="5">客户端测试</option>
							</select>
						</div>
						<center>
							<a class="button" href="javascript:sub()">发布文章</a>
							<a class="button" href="javascript:e()">不写了</a>
						</center>
					</form>
				</div>
			</div>
		</div>
		<div class="main-right">
			<div class="list-right">
				<div class="login">
					<div class="login-title">双体天翊博客中文社区</div>
					<div class="regist">
						<c:choose>
						<c:when test="${user!=null}">
							欢迎：${user.nikeName}
						</c:when>
						<c:otherwise>
							你可以 <a href="#">注册</a>
						</c:otherwise>
						</c:choose>
					</div>
					<div class="goto-login">
						<c:choose>
						<c:when test="${user!=null}">
							<a class="button" href="/loginout">请点击退出</a>
						</c:when>
						<c:otherwise>
							<a class="button" href="./login.jsp">请点击登录</a>
						</c:otherwise>
						</c:choose>
					</div>
					<div class="goto-login">
						<c:if test="${user!=null}">
							<a class="button" href="/write">写文章</a>
						</c:if>
					</div>
				</div>
				<div class="hot-blog">
					<div class="hot-title">热门文章</div>
					<div class="hot-contents">
						<div class="hot-content"><a href="#">关于cnode API 有一个问题 请教</a></div>
						<div class="hot-content"><a href="#">express+mongodb，两个数据模型关联的</a></div>
						<div class="hot-content"><a href="#">阿里云优惠券免费大放送了！！！，需要购买的抓紧机会！！！</a></div>
						<div class="hot-content"><a href="#">关于回调的问题</a></div>
						<div class="hot-content"><a href="#">Node.js进阶：cluster模块深入剖析</a></div>
					</div>
				</div>
				<div class="qr-code">
					<div class="hot-title">扫描关注双体系</div>
					<div class="hot-contents">
						<div class="hot-content"><img src="./img/qr/generate.gif"/></div>
						<div class="hot-footer">双体系公众号</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="footer.jsp"></jsp:include>
	<script src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
	<script>
		var E = window.wangEditor
		var editor = new E('#blog_content')
		editor.create();
		
		function sub() {
			var h = editor.txt.html()  // 获取 JSON 格式的内容
	        console.log(h);
		}
		function e() {
			editor.txt.html('<p>阿<span style="font-weight: bold;">斯大法</span></p><p><img src="https://img04.sogoucdn.com/app/a/100520093/ab84179d815c80d4-309c93e6e70dc7a0-79b43145840dce87f6d28f9c18289ce9.jpg" style="max-width:100%;"><span style="font-weight: bold;"><br></span></p>');
		}
	</script>
</body>
</html>